<template>
  <el-input
    v-if="props.columnData.type === 'TEXT'"
    v-model.trim="props.itemData[columnData.key]"
    :placeholder="t('keys.pleaseEnter')"
    style="width:100%"
    @blur="blurChange"
  />
  <el-input-number v-if="props.columnData.type === 'NUMBER'" v-model.trim="props.itemData[columnData.key]" :min="1" :max="10" style="width:100%" />
  <el-select v-if="props.columnData.type === 'SELECT'" v-model="props.itemData[columnData.key]" placeholder="请选择" style="width:100%">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" @click="selectChange(item)" />
  </el-select>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
  columnData: {
    type: Object,
    default: () => {}
  },
  itemData: {
    type: Object,
    default: () => {}
  }
})
const options = [
  {
    label: '是',
    value: true
  },
  {
    label: '否',
    value: false
  }
]
const blurChange = (val) => {
  if (props.itemData[props.columnData.key] !== '') {
    props.itemData.isError[props.columnData.key].status = true
    props.itemData.isError[props.columnData.key].msg = ''
  }
}
const selectChange = (val) => {
  props.itemData[props.columnData.key] = val.label
  if (props.itemData[props.columnData.key] !== '') {
    props.itemData.isError[props.columnData.key].status = true
    props.itemData.isError[props.columnData.key].msg = ''
  }
}
</script>

<style lang="scss" scoped></style>
